<!doctype html>
<html>
	<head>
		<!--声明当前页码的编码集：charset=gbk,gb2312(中文编码),utf-8(国际编码)-->
		<meta http-equiv="content-Type" content="text/html;charset=gbk">
		<!--当前页面的三要素-->
		<title>贵兴QQ空间</title>
		<meta name="keywords" content="关键词,关键词">
		<meta name="description" content="">

		<style type="text/css">
		*{padding:0; margin:0; font-family:"微软雅黑"}
		li{list-style:none; padding:0; margin:0}
		.mains{width:768px;margin:40px auto;border:1px solid red;}
		.mains .title{font-size:25px;text-align:center;padding:10px 5px}

		.g1,.g2,.g3,.g4{width:380px;height:180px;float:left;margin:2px 2px;}
		.clear{clear:both;}
		</style>
</head>

<body>
	<div class="mains">
		<div class="g1">
			<ul>
			<li><img src="images/wfscroll-1.jpg"></li>
			<li><img src="images/wfscroll-2.jpg"></li>
			<li><img src="images/wfscroll-3.jpg"></li>
			<li><img src="images/wfscroll-4.jpg"></li>
			<li><img src="images/wfscroll-5.jpg"></li>
			</ul>
		</div>

		<div class="g2">
			<ul>
			<li><img src="images/wfscroll-1.jpg"></li>
			<li><img src="images/wfscroll-2.jpg"></li>
			<li><img src="images/wfscroll-3.jpg"></li>
			<li><img src="images/wfscroll-4.jpg"></li>
			<li><img src="images/wfscroll-5.jpg"></li>	
			</ul>
		</div>

		<div class="g3">
			<ul>
			<li><img src="images/wfscroll-1.jpg"></li>
			<li><img src="images/wfscroll-2.jpg"></li>
			<li><img src="images/wfscroll-3.jpg"></li>
			<li><img src="images/wfscroll-4.jpg"></li>
			<li><img src="images/wfscroll-5.jpg"></li>
			</ul>
		</div>

		<div class="g4">
			<ul>
			<li><img src="images/wfscroll-1.jpg"></li>
			<li><img src="images/wfscroll-2.jpg"></li>
			<li><img src="images/wfscroll-3.jpg"></li>
			<li><img src="images/wfscroll-4.jpg"></li>
			<li><img src="images/wfscroll-5.jpg"></li>	
			</ul>
		</div>
		<div class="clear"></div>
	</div>

	<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgscroll.min.js"></script>
<script type="text/javascript">
$(function(){

	imgScroll.rolling({
		name:'g1',
		width:'380px',
		height:'180px',
		direction:'top',
		speed:10,
		addcss:true
	});
	
	imgScroll.rolling({
		name:'g2',
		width:'380px',
		height:'180px',
		direction:'left',
		speed:20,
		addcss:true
	});
	
	imgScroll.rolling({
		name:'g3',
		width:'380px',
		height:'180px',
		direction:'bottom',
		speed:30,
		addcss:true
	});
	
	imgScroll.rolling({
		name:'g4',
		width:'380px',
		height:'180px',
		direction:'right',
		speed:40,
		addcss:true
	});

})
</script>
</body>
</html>
